<template>
  <transition>
    <div class="app-find-password">
      <section class="app-main">
        <div class="module-form">
          <div class="input-content">
            <mt-field :class="{active:current=='1'}" label="手机号码" placeholder="请输入手机号码" v-model="linkPhone" type="number" @keyup.enter.native="handleLogin" @focus.native.capture="phoneBlur('1')"></mt-field>
            <mt-field :class="{active:current=='2'}" label="验证码" placeholder="请输入验证码" v-model="code" @keyup.enter.native="handleLogin" @focus.native.capture="phoneBlur('2')">

              <mt-button type="danger" class="button-send-code" :class="{disabled:validCode==false}" @click="handleGetCode">{{getCodeTitle}}</mt-button>
            </mt-field>
            <mt-field :class="{active:current=='3'}" label="新密码" placeholder="请输入新密码" v-model="userpwd" @keyup.enter.native="handleLogin" @focus.native.capture="phoneBlur('3')"></mt-field>
            <mt-field :class="{active:current=='4'}" label="确认密码" placeholder="请再次输入新密码" v-model="userpwdAgain" @keyup.enter.native="handleLogin" @focus.native.capture="phoneBlur('4')"></mt-field>
          </div>
        </div>
        <div class="button-content">
          <mt-button type="danger" @click="handleLogin">确认提交</mt-button>
        </div>
      </section>
      <mt-popup
        v-model="contactPopup"
        position="middle" class="contact-popup">
        <div class="module">
          <div>请联系客服重置密码</div>
          <div>客服电话：<a href="tel:400-968-3360">400-968-3360</a></div>
          <div class="action-button">
            <mt-button type="default" @click="contactPopup=false">取消</mt-button>
          </div>
        </div>
      </mt-popup>
    </div>
  </transition>
</template>

<script>
  import { Header,Cell,Field,Button,Toast,Checklist,MessageBox} from 'mint-ui';
  export default {
    components:{
      Header,
      Cell,
      Field,
    },
    data () {
      return {
        current:'',
        isRemember:'',
        linkPhone:'',
        userpwd:'',
        userpwdAgain:'',
        code:'',
        getCodeTitle:'获取验证码',
        validCode:true,
        contactPopup:false,
      }
    },
    mounted(){},
    methods:{

      handleGetCode(){

        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if(!myreg.test(this.linkPhone)){
          Toast({
            message: '请输入有效的手机号码',
            position: 'middle',
            duration: 800
          });
          return false;
        }
        var time=90;
        if (this.validCode) {
          this.validCode=false;
          console.log(1111)
          var params = new URLSearchParams();
          params.append('tel',this.linkPhone);
          this.$axios({
            method: 'post',
            url:'gp/bu/commonUtil!sendCode.do',
            data:params
          }).then((res)=>{
            if(res.data.statusCode==200){
            Toast({
              message: '短信发送成功',
              position: 'middle',
              duration:1000
            });

          }else{
            Toast({
              message: res.data.message,
              position: 'middle',
              duration:1000
            });
          }
        })
          this.getCodeTitle=time+"秒重新获取";
          var t=setInterval(()=> {
              time--;
          this.getCodeTitle=time+"秒重新获取";
          if (time==0) {
            clearInterval(t);
            this.getCodeTitle="重新获取"
            this.validCode=true;

          }
        },1000)
        }
      },
      phoneBlur(index){
        this.current=index
      },
      handleLogin(){

        var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if(this.linkPhone==''){
          Toast({
            message: '手机号码不能为空',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        if(!myreg.test(this.linkPhone)){
          Toast({
            message: '请输入有效的手机号码',
            position: 'middle',
            duration: 1000
          });
          return false;
        }
        if(this.code==''){
          Toast({
            message: '验证码不能为空',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        if(this.userpwd==''){
          Toast({
            message: '新密码不能为空',
            position: 'middle',
            duration:1000
          });
          return false;
        };
        if(this.userpwd!==this.userpwdAgain){
          Toast({
            message: '两次输入的密码不一致',
            position: 'middle',
            duration:1000
          });
          return false;
        };

        var params = new URLSearchParams();

        params.append('linkPhone', this.linkPhone);
//        params.append('password', this.$md5(this.userpwd));
        params.append('password', this.userpwd);
        params.append('mobileLogin',1);
        this.$axios({
          method: 'post',
//          url:'gp/m!signIn.do',
          url:'gp/login.do',
//          headers:{
//            'X-Requested-With':'XMLHttpRequest'
//          },
          data:params
        }).then((res)=>{
          if(res.data.statusCode==200){

          localStorage.phone=this.linkPhone;
          localStorage.password=this.$md5(this.userpwd);
          Toast({
            message: '登录成功',
            position: 'middle',
            duration:1500
          });
          if(typeof this.$route.query.redirect=='undefined'){
            setTimeout(()=>{
              this.$router.push({path:'/index'})},1500)
          }else{
            setTimeout(()=>{
              this.$router.push({path:this.$route.query.redirect})},1500)
          }
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:1000
          });
          return false;
        }
      }).catch(function (error) {
          alert(error);
        });;
      },
      handleFindPwd(){
//        this.contactPopup=true;
        this.$router.push({path:'/index'})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .app-find-password{
  }
  .app-find-password .button-send-code{
    background: #007EE5;
    font-size: 15px;
    height:34px;
  }
  .app-find-password .button-send-code.disabled{
    background: #999;
  }
  .app-find-password .contact-popup{
    width:70%;
    padding:12px;
    border-radius:6px;
    font-size: 16px;
    line-height:30px;
  }
  .app-find-password .contact-popup .action-button{
    padding:10px 0 6px;
    text-align: center;
  }
  .app-find-password .contact-popup .action-button .mint-button{
    padding:6px 24px;
    height: 36px;
    font-size: 15px;
  }
  .app-find-password .action-find-pwd{
    padding:4px 0 18px;
    font-size: 16px;
    color:#007EE5;
    text-align: right;
  }
  .app-find-password .logo{
    padding:48px 134px 0;
    text-align: center;
  }
  .app-find-password .button-content .mint-button{
    background: -webkit-linear-gradient(left, #03adf3 , #0080e5); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #03adf3 , #0080e5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #03adf3 , #0080e5); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #03adf3 , #0080e5); /* 标准的语法 */
    display: block;
    width: 100%;
  }
  .app-find-password .module-form{
    background: #fff;
    padding:34px 30px 10px;
  }
  .app-find-password .button-content{
    padding:34px 30px 24px;
  }
  .app-find-password .input-content .mint-cell{
    background: none !important;
    position: relative;
    margin:0 0 18px;
    padding: 0 0 6px;
  }
  .app-find-password .input-content .mint-cell:before{
    background: #ddd;
    position: absolute;
    bottom:3px;
    width:100%;
    height: 1px;
    content: '';
    transition: all .3s;
  }
  .app-find-password .input-content .mint-cell:after{
    background: #007EE5;
    position: absolute;
    bottom:3px;
    width: 0;
    height: 1px;
    content: '';
    transition: all .3s;
  }
  .app-find-password .input-content .mint-cell.active:after{
    width: 100%;
  }
  .app-find-password .input-content .mint-cell.active .mint-cell-title{
    color: #007EE5;
  }
  .app-find-password .input-content .mint-field-core{
    font-size: 15px;
  }
  .app-find-password .input-content .mint-cell-title{
    width:76px;
    font-size: 15px;
  }
  .app-find-password .action-content{
    padding:0 0 24px;
    text-align: right;
  }
  .app-find-password .action-content .mint-checklist-title{
    margin: 0;
  }
  .app-find-password .action-content .mint-cell{
    background:none;
    min-height:inherit;
  }
  .app-find-password .action-content .mint-checkbox-core{
    border-radius:0
  }
  .app-find-password .action-content .mint-checklist-label{
    padding: 0;
  }
  .app-find-password .action-content .mint-cell-wrapper{
    background:none;
  }
  .app-find-password .input-content .mint-cell-wrapper{
    background:none;
    padding: 0 0 6px;
  }
  .app-find-password .none-tips{
    padding:16px 0 0;
    text-align: right;
    font-size: 15px;
    color: #444;
  }
  .app-find-password .none-tips a{
    color: #007EE5;
  }
  .app-find-password .addon-two .mint-cell-text{
    letter-spacing:22px;
  }
</style>

